<template>
  <el-form label-width="100px" style="max-width: 600px;min-width: 400px;margin: 20px auto auto;">
    <el-form-item label="标题">
      <el-input v-model="quotation.title" placeholder="请输入引文标题"/>
    </el-form-item>
    <el-form-item label="DOI">
      <el-input v-model="quotation.doi" placeholder="请输入引文DOI" @input="checkDoi"/>
    </el-form-item>
    <el-form-item label="页码">
      <el-input v-model="quotation.page" placeholder="请输入引文页码"/>
    </el-form-item>
    <el-form-item label="出版时间">
      <el-date-picker v-model="quotation.date" type="date" placeholder="请选择出版日期" style="width: 100%"/>
    </el-form-item>
    <author-list-component v-model="quotation.authors"/>
    <br>
    <el-button @click="add" style="float: right">确认新增引文</el-button>
  </el-form>

</template>

<script setup>
import {ref, provide} from "vue";
import AuthorListComponent from "@/components/add/document/author/AuthorListComponent.vue";
import {addQuotationApi} from "@/apis/quotation.js";
import {ElMessage} from "element-plus";

provide('doc', {})
const quotation = ref({authors: []})

const add = () => {
  addQuotationApi(quotation.value).then(resp => {
    if (resp.data.code === 200) {
      ElMessage.success('添加成功')
      quotation.value = ({authors: []})
    } else {
      ElMessage.error(resp.data.msg)
    }
  })
}

const checkDoi = () => {
  const str = quotation.value.doi
  quotation.value.doi = str.replace(' ', '')
}

</script>


<style scoped>

</style>